<template>
  <div>
    <el-card>
      <LiveOverview :tabs="realTimeData" @refresh="handleRefresh"> </LiveOverview>
    </el-card>
    <el-card class="mt-20">
      <div>
        <Tabs :tabs="tabs" :currentKey="currentTab" @tab-click="tabClick" />
        <IntegralExpenditureTable ref="integralExpenditureTable" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { useFilterStatistics } from '@/hooks'
import IntegralExpenditureTable from '@/views/user/member-list/components/integralExpenditureTable'

export default {
  name: 'integralExpenditure',
  components: {
    IntegralExpenditureTable
  },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentTab: 'integral',
      platform: 2,
      tabs: [{ label: '好物平台', num: '', key: 'integral', value: 2 }],
      realTimeData: [
        {
          isShow: true,
          baseData: {
            key: 'totalOutlayAmount',
            label: '总支出积分',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户账户总消耗积分'
          },
          yesterdayData: {
            key: 'outlayNum',
            isShow: true,
            value: '',
            isUnit: {
              startText: '笔数'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'balanceNum',
            label: '总积分余额',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户账户总积分余额'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'incomePlatformNum',
            label: '总积分来源平台',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户账户积分来源平台'
          }
        }
      ]
    }
  },
  created() {
    this.handleIntegralList()
    this.handleIntegralTabs()
    this.handleSettlementStatistics()
  },
  methods: {
    //刷新
    handleRefresh() {
      this.handleIntegralTabs()
      this.handleIntegralList()
      this.handleSettlementStatistics()
    },
    //获取tab值
    tabClick({ key, value }) {
      this.currentTab = key
      this.platform = value
      this.handleIntegralList()
    },
    //获取参数
    handleParams() {
      let params = {}
      if (this.userId) params.userId = this.userId
      if (this.platform) params.platform = Number(this.platform)
      params.transactionType = 1
      return params
    },
    // 获取积分结算-数据概况
    async handleSettlementStatistics() {
      const params = this.handleParams()
      const {
        data: { baseData }
      } = await this.$http.integral.integralSettlementApi.getIntegralStatistics(params)

      // 统计数据
      const realTimeData = {
        baseData: {
          incomePlatformNum: baseData.incomePlatformNum,
          totalOutlayAmount: baseData.totalOutlayAmount,
          balanceNum: Number(baseData.totalIncomeAmount) - Number(baseData.totalOutlayAmount)
        },
        yesterdayData: {
          outlayNum: baseData.outlayNum
        }
      }
      this.realTimeData = useFilterStatistics(this.realTimeData, realTimeData)
    },
    //获取积分列表
    handleIntegralList() {
      const params = this.handleParams()
      this.$nextTick(() => {
        this.$refs.integralExpenditureTable.handleIntegralList(params)
      })
    },
    //获取积分列表tab统计
    async handleIntegralTabs() {
      const params = this.handleParams()
      const {
        data: { outs }
      } = await this.$http.integral.integralSettlementApi.getIntegralTabs(params)
      // 统计
      this.tabs = this.tabs.map(item => {
        outs.forEach(v => {
          if (v.platform === item.value) {
            item.num = v.tabNum || 0
          }
        })
        return item
      })
    }
  }
}
</script>

<style scoped></style>
